--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
sbapp/kivymd/uix/responsivelayout.py f8b3e3760b831745cf10d97aeae64e9c00a136a9 (f8b3e376) Text, 5.41 KB
T8b949e"""
Components/ResponsiveLayout
===========================
.. versionadded:: 1.0.0
.. rubric:: Responsive design is a graphic user interface (GUI) design
approach used to create content that adjusts smoothly to various screen
sizes.
.. raw:: html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
<iframe
src="https://www.youtube.com/embed/HMK1UZbSyeo"
frameborder="0"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
The :class:`~MDResponsiveLayout` class does not reorganize your UI. Its task
is to track the size of the application screen and, depending on this size,
the :class:`~MDResponsiveLayout` class selects which UI layout should be
displayed at the moment: mobile, tablet or desktop. Therefore, if you want to
have a responsive view some kind of layout in your application, you should
have three KV files with UI markup for three platforms.
You need to set three parameters for the :class:`~MDResponsiveLayout` class
:attr:`~MDResponsiveLayout.mobile_view`,
:attr:`~MDResponsiveLayout.tablet_view` and
:attr:`~MDResponsiveLayout.desktop_view`. These should be Kivy or KivyMD
widgets.
Usage responsive
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.. code-block:: python
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.responsivelayout import MDResponsiveLayout
from kivymd.uix.screen import MDScreen
KV = '''
<CommonComponentLabel>
halign: "center"
<MobileView>
CommonComponentLabel:
text: "Mobile"
<TabletView>
CommonComponentLabel:
text: "Table"
<DesktopView>
CommonComponentLabel:
text: "Desktop"
ResponsiveView:
'''
class CommonComponentLabel(MDLabel):
pass
class MobileView(MDScreen):
pass
class TabletView(MDScreen):
pass
class DesktopView(MDScreen):
pass
class ResponsiveView(MDResponsiveLayout, MDScreen):
def __init__(self, **kw):
super().__init__(**kw)
self.mobile_view = MobileView()
self.tablet_view = TabletView()
self.desktop_view = DesktopView()
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/responsive-usage.gif
:align: center
.. note:: Use common components for platform layouts (mobile, tablet, desktop views).
As shown in the example above, such a common component is the
`CommonComponentLabel` widget.
Perhaps you expected more from the :class:`~MDResponsiveLayout` widget, but
even `Flutter` uses a similar approach to creating a responsive UI.
You can also use the `commands <https://kivymd.readthedocs.io/en/latest/api/kivymd/tools/patterns/create_project/#create-project-with-responsive-view>`_
provided to you by the developer tools to create a project with an responsive
design.
"""
Tff7b72from T7ee787kivyT7ee787.T7ee787event Tff7b72import Te6edf3EventDispatcher
Tff7b72from T7ee787kivyT7ee787.T7ee787properties Tff7b72import Te6edf3ObjectProperty
Tff7b72from T7ee787kivymdT7ee787.T7ee787uixT7ee787.T7ee787controllers Tff7b72import Te6edf3WindowController
Tff7b72class T56d364MDResponsiveLayoutTb4b4b4(Te6edf3EventDispatcherTb4b4b4, Te6edf3WindowControllerTb4b4b4)Tb4b4b4:
T8b949e"""
:Events:
:attr:`on_change_screen_type`
Called when the screen type changes.
"""
Te6edf3mobile_view Tff7b72= Te6edf3ObjectPropertyTb4b4b4(Tb4b4b4)
T8b949e"""
Mobile view. Must be a Kivy or KivyMD widget.
:attr:`mobile_view` is an :class:`~kivy.properties.ObjectProperty`
and defaults to `None`.
"""
Te6edf3tablet_view Tff7b72= Te6edf3ObjectPropertyTb4b4b4(Tb4b4b4)
T8b949e"""
Tablet view. Must be a Kivy or KivyMD widget.
:attr:`tablet_view` is an :class:`~kivy.properties.ObjectProperty`
and defaults to `None`.
"""
Te6edf3desktop_view Tff7b72= Te6edf3ObjectPropertyTb4b4b4(Tb4b4b4)
T8b949e"""
Desktop view. Must be a Kivy or KivyMD widget.
:attr:`desktop_view` is an :class:`~kivy.properties.ObjectProperty`
and defaults to `None`.
"""
Te6edf3_current_device_type Tff7b72= Ta5d6ff"Ta5d6ff"
Tff7b72def Tff7b72__init__Tb4b4b4(Tff7b72selfTb4b4b4, Tff7b72*Te6edf3argsTb4b4b4, Tff7b72*Tff7b72*Te6edf3kwargsTb4b4b4)Tb4b4b4:
Tffa657superTb4b4b4(Tb4b4b4)Tff7b72.Td2a8ff__init__Tb4b4b4(Tff7b72*Te6edf3argsTb4b4b4, Tff7b72*Tff7b72*Te6edf3kwargsTb4b4b4)
Tff7b72selfTff7b72.Td2a8ffregister_event_typeTb4b4b4(Ta5d6ff"Ta5d6ffon_change_screen_typeTa5d6ff"Tb4b4b4)
Tff7b72def Td2a8ffon_change_screen_typeTb4b4b4(Tff7b72selfTb4b4b4, Tff7b72*Te6edf3argsTb4b4b4)Tb4b4b4:
T8b949e"""Called when the screen type changes."""
Tff7b72def Td2a8ffon_sizeTb4b4b4(Tff7b72selfTb4b4b4, Tff7b72*Te6edf3argsTb4b4b4) Tff7b72-Tff7b72> Tff7b72NoneTb4b4b4:
T8b949e"""Called when the application screen size changes."""
Tffa657superTb4b4b4(Tb4b4b4)Tff7b72.Td2a8ffon_sizeTb4b4b4(Tff7b72*Te6edf3argsTb4b4b4)
Tff7b72selfTff7b72.Td2a8ffset_screenTb4b4b4(Tb4b4b4)
Tff7b72if Tff7b72selfTff7b72.Td2a8ff_current_device_type Tff7b72!= Tff7b72selfTff7b72.Td2a8ffreal_device_typeTb4b4b4:
Tff7b72selfTff7b72.Td2a8ff_current_device_type Tff7b72= Tff7b72selfTff7b72.Td2a8ffreal_device_type
Tff7b72def Td2a8ffset_screenTb4b4b4(Tff7b72selfTb4b4b4) Tff7b72-Tff7b72> Tff7b72NoneTb4b4b4:
T8b949e"""
Sets the screen according to the type of application screen size:
mobile/tablet or desktop view.
"""
Tff7b72if Tff7b72selfTff7b72.Td2a8ffreal_device_type Tff7b72!= Tff7b72selfTff7b72.Td2a8ff_current_device_typeTb4b4b4:
Tff7b72selfTff7b72.Td2a8ffclear_widgetsTb4b4b4(Tb4b4b4)
Tff7b72if Tff7b72selfTff7b72.Td2a8ffmobile_view Tff7b72and Tff7b72selfTff7b72.Td2a8fftablet_view Tff7b72and Tff7b72selfTff7b72.Td2a8ffdesktop_viewTb4b4b4:
Tff7b72if Tff7b72selfTff7b72.Td2a8ffreal_device_type Tff7b72== Ta5d6ff"Ta5d6ffmobileTa5d6ff"Tb4b4b4:
Tff7b72selfTff7b72.Td2a8ffadd_widgetTb4b4b4(Tff7b72selfTff7b72.Td2a8ffmobile_viewTb4b4b4)
Tff7b72elif Tff7b72selfTff7b72.Td2a8ffreal_device_type Tff7b72== Ta5d6ff"Ta5d6fftabletTa5d6ff"Tb4b4b4:
Tff7b72selfTff7b72.Td2a8ffadd_widgetTb4b4b4(Tff7b72selfTff7b72.Td2a8fftablet_viewTb4b4b4)
Tff7b72elif Tff7b72selfTff7b72.Td2a8ffreal_device_type Tff7b72== Ta5d6ff"Ta5d6ffdesktopTa5d6ff"Tb4b4b4:
Tff7b72selfTff7b72.Td2a8ffadd_widgetTb4b4b4(Tff7b72selfTff7b72.Td2a8ffdesktop_viewTb4b4b4)
Tff7b72selfTff7b72.Td2a8ffdispatchTb4b4b4(Ta5d6ff"Ta5d6ffon_change_screen_typeTa5d6ff"Tb4b4b4, Tff7b72selfTff7b72.Td2a8ffreal_device_typeTb4b4b4)
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────